import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Col, Row, DatePicker, Modal} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";
import {Table, Tag, Divider} from 'antd';
import ItemDetail from "@/pages/GaoLu/components/ItemDetail";
import styles from './index.less';


const {Column, ColumnGroup} = Table;


const {RangePicker} = DatePicker;


class ChangeRate extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  state = {
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    selectedTime: currentTime(),

    // 展示时间
    displayStartTime: time.getStartOfDay(),
    displayEndTime: time.getEndOfDay(),

    // 默认定时任务trigger时间
    defaultStartTime: time.getStartOfDay(),
    defaultEndTime: time.getEndOfDay(),
    currentTime: null,
    data: [],
    chart: null,
    visible: false
    // defaultTimeSpan: 8,

  };

  stopLoop = false;


  async componentDidMount() {

    const payload = await getMockTime("LuGang")
    const {start,end,current} = payload

    const {dispatch} = this.props;
    dispatch({
      type: 'lugang/getChangeRate',
      payload: {"time": dateFormat(current)}
    });

    this.setState({startTime:start,endTime:end,selectedTime:current,
      displayStartTime:start,displayEndTime:end,defaultStartTime:start,defaultEndTime:end})

  }

  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  static getDerivedStateFromProps(nextProps, prevState) {

  }

  timePick = (value) => {
    this.state.selectedTime = value.toDate();

    this.props.dispatch({
      type: 'lugang/getChangeRate',
      payload: {"time": dateFormat(this.state.selectedTime)}
    });
  };


  render() {
    const {
      width = 100,
      height = 350,
      changeRate = {group: [], recommend: []}
    }
      = this.props;
    const dateFormat = 'YYYY-MM-DD HH';

    const recommendDom = changeRate.recommend.map(item => (
      <Row key={item}>
        <Col span={12}>
          {item.desc}
        </Col>
        <Col span={4}>
          {item.status}
        </Col>
        <Col span={8}>
          {item.scope}
        </Col>
      </Row>
    ))

    return (
      <Row type={"flex"} style={{marginTop: 24}}>
        <Col span={12} style={{paddingRight: 8}}>
          <Card
            style={{width: '100%',height:560}}
            title="炉缸温度变化率"
            bordered={false}
            loading={false}
          >
            <div className="sheet">
              <DatePicker
                showTime
                format={dateFormat}
                placeholder="选择时间"
                defaultValue={moment(this.state.selectedTime, dateFormat)}
                key={Math.random()}
                onOk={this.timePick}
                style={{marginBottom: 8}}
              />

              <Row>
                <Table dataSource={changeRate.group}
                       pagination={false}
                       size="small">
                  <ColumnGroup title="高度">
                    <Column title="  " dataIndex="tag" key="tag"/>
                  </ColumnGroup>
                  <Column title="0-45" dataIndex="group1" key="group1"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="45-90" dataIndex="group2" key="group2"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="90-135" dataIndex="group3" key="group3"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="135-180" dataIndex="group4" key="group4"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="180-225" dataIndex="group5" key="group5"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="225-270" dataIndex="group6" key="group6"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="270-315" dataIndex="group7" key="group7"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>
                  <Column title="315-0" dataIndex="group8" key="group8"
                          render={tag => <span className={tag > 20 && styles.changeWarning}>{tag}</span>}/>

                </Table>
              </Row>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card
            style={{width: '100%',height:560}}
            title="操作建议及评价"
            bordered={false}
            loading={false}

          >
          <div style={{height: "100%", overflowY: "auto"}}>
            {recommendDom}
          </div>
          </Card>
        </Col>
      </Row>
    );
  }
}

export default connect(({lugang, global}) => ({
  changeRate: lugang.changeRate,
  global
}))
(ChangeRate);
